// 用于去除照片拍摄时的阴影
import { Loading } from 'element-ui'
// 16位转rgb
function colorRgb(value) {
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
  // 把颜色值变成小写
  var color = value ? value.toLowerCase() : '#fff'
  var rgbList = []
  if (reg.test(color)) {
    // 如果只有三位的值，需变成六位，如：#fff => #ffffff
    if (color.length === 4) {
      var colorNew = '#'
      for (let i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1))
      }
      color = colorNew
    }
    // 处理六位的颜色值，转为RGB
    for (let i = 1; i < 7; i += 2) {
      rgbList.push(parseInt('0x' + color.slice(i, i + 2)))
    }
  } else {
    rgbList = [255, 255, 255]
  }
  return rgbList
}
// 图片灰度转换
function toGray(data) {
  for (let i = 0; i < data.length; i += 4) {
    let r = data[i],
      g = data[i + 1],
      b = data[i + 2]

    // 计算灰度 并根据阈值转换为黑白两色
    const gray = 0.299 * r + 0.587 * g + 0.114 * b >= 128 ? 255 : 0
    data[i] = gray
    data[i + 1] = gray
    data[i + 2] = gray
  }
}
// 图片背景过滤
function filter(data, isTransparent, backgroundColor) {
  for (let i = 0; i < data.length; i += 4) {
    let r = data[i],
      g = data[i + 1],
      b = data[i + 2]

    // 色值在250-256之间都认为是白色
    if ([r, g, b].every((v) => v < 256 && v > 250)) {
      if (isTransparent && typeof isTransparent === 'boolean') {
        data[i + 3] = 0 // 把背景改成透明
      } else {
        const bgColorRgbList = colorRgb(backgroundColor)
        data[i] = bgColorRgbList[0]
        data[i + 1] = bgColorRgbList[1]
        data[i + 2] = bgColorRgbList[2]
      }
    }
  }
}
/** 获取签名图片
 * @param {*} option
 *  @value url 图片源
 *  @value isTransparent 设置背景是否透明
 *  @value backgroundColor 设置背景色(isTransparent为true时, 背景色设置失效)
 * @param {*} cb 返回base64
 * @return {*} base64URL
 */
export default function (option, cb) {
  const loading = Loading.service({ text: '处理中...' })
  const { url, isTransparent, backgroundColor } = option || {}
  if (!url) return false
  let img = new Image()
  // 解决图片的跨域问题
  img.crossOrigin = 'Anonymous'
  img.src = url
  img.onload = function () {
    const canvasEL = document.createElement('canvas')
    const width = img.width
    const height = img.height
    canvasEL.width = width
    canvasEL.height = height
    const ctx = canvasEL.getContext('2d')
    ctx.drawImage(img, 0, 0, width, height)
    // 获取画布像素信息
    const imageData = ctx.getImageData(0, 0, width, height)
    const data = imageData.data
    toGray(data) // 这里对图像数据进行灰度处理
    filter(data, isTransparent, backgroundColor) // 这里对图像数据进行过滤处理

    // 把新的内容画进画布里
    ctx.putImageData(imageData, 0, 0)
    cb && cb(canvasEL.toDataURL('image/png', 1.0))
    loading.close()
  }
}
